<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minium-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <!-- 
        物理像素与物理像素比
            物理像素点指的是屏幕中的小颗粒,这个在屏幕出厂的那一刻就已经定死了.比如iphone6/7/8就是750*1334。我们开发的时候1px不一定就是等于一个物理像素的。
            PC端页面，一个px等于一个物理像素的，但是移动端就不一定了。1个px能显示的物理像素点的个数，称为物理像素比或者屏幕像素比。我们代码上写的一般叫做 css像素。
     -->

    <!-- 举个例子，你用下面这个div盒子，讲道理300px的盒子，连iphone的750px的一般都不到，但是你打开浏览器的移动端调试，选择iphone6/7/8，你会发现一个让你惊掉下巴的事情。这个盒子都快把宽度沾满了。然后你试试吧宽度改为375px，你会发现直接正好占满宽度。所以说实际显示效果来说，iphone 6/7/8其实只相当于css像素中的375px。所以我们的iphone的750px的物理像素和375px的css像素的比值就是2，这个比值也就是物理像素比(屏幕像素比)。不过不同的设备比值是不同的，也就是说你切换到别的设备，这个盒子就不见得能占宽度的一大半了 -->
    <div style="width: 300px;height: 300px;background-color: pink;"></div>
</body>
</html>